import React, { Component } from 'react';
import { Form, Input, Space, Button, Tooltip } from 'antd'
import TheTable from "../../../components/TheTable";
import TheButton from "@/components/TheButton";
import { apiGetPrivacyPolicyTextConfigurationPage, apiAddPrivacyPolicyTextConfiguration, apiUpdatePrivacyPolicyTextConfiguration } from '@/request/privacySetting'
import TheDialog from "../../../components/TheDialog";
import ThePagination from "../../../components/ThePagination";
import Editor from "./component/editor";
import { QuestionCircleOutlined } from '@ant-design/icons';

class AboutUs extends Component {
    formRef = React.createRef();
    state = {
        loading: false,
        dataSource: null,
        pageData: {
            pageNo: 1,
            pageSize: 10,
        },
        total: 0,
        columns: [
            {
                title: (
                    <div>
                        <text style={{ marginRight: 10 }}>日期</text>
                        <Tooltip placement="top" title={() => { return '隐私政策选取最新日期的版本展示' }}  >
                            <QuestionCircleOutlined style={{ fontSize: '16px' }} />
                        </Tooltip>
                    </div>
                ),
                render: (text, record, index) => text,
                width: 150,
                dataIndex: 'showTime',
                key: 'showTime',
                align: 'center'
            },
            {
                title: '标题',
                dataIndex: 'aboutUsTitle',
                key: 'aboutUsTitle',
                align: 'center'
            },
            {
                title: '操作',
                align: 'center',
                width: 200,
                render: record => {
                    return <TheButton haspermi={['privacySetting:aboutUs:update']} onClick={() => this.editor(record)}>修改</TheButton>
                }
            }
        ],
        initialValues: null,
        dialogStatus: false,
        title: null,
        btnLoading: false
    }

    async componentDidMount() {
        await this.getData()
    }

    getData = async () => {
        let { pageNo, pageSize } = this.state.pageData

        const res = await apiGetPrivacyPolicyTextConfigurationPage({ pageNo, pageSize })
        this.setState({
            loading: true
        })
        if (res.code === 0) {
            this.setState({
                dataSource: res.data.records,
                pageData: {
                    pageNo: res.data.current,
                    pageSize: res.data.size
                },
                total: res.data.total,
            }, () => {
                this.setState({
                    loading: false
                })
            })
        } else {
            this.setState({
                loading: false
            })
        }
    }

    onFinish = async value => {
        const { initialValues } = this.state
        this.setState({
            btnLoading: true
        })
        const title = this.state.title
        console.log("value", value);
        if (title == '新增') {
            const data = await apiAddPrivacyPolicyTextConfiguration({ ...value, aboutUsTitle: "隐私政策" })
            if (data.code === 0) {
                this.setState({
                    btnLoading: false
                }, async () => {
                    await this.getData()
                    await this.dialogCancel()
                    React.$message({
                        type: 'info',
                        content: '新增成功'
                    })
                })
            } else {
                this.setState({
                    btnLoading: false
                })
            }
        } else if (title == '修改') {
            const data = await apiUpdatePrivacyPolicyTextConfiguration({ ...value, privacyPolicyTextConfigurationId: initialValues.privacyPolicyTextConfigurationId, aboutUsTitle: "隐私政策" })
            if (data.code === 0) {
                this.setState({
                    btnLoading: false
                }, async () => {
                    await this.getData()
                    await this.dialogCancel()
                    React.$message({
                        type: 'info',
                        content: '修改成功'
                    })
                })
            } else {
                this.setState({
                    btnLoading: false
                })
            }
        }

    }

    editor = value => {
        this.setState({
            dialogStatus: true,
            title: '修改',
            initialValues: value
        })
    }
    add = () => {
        this.setState({
            dialogStatus: true,
            title: '新增',
            initialValues: {}

        })
    }
    dialogCancel = () => {
        this.setState({
            dialogStatus: false,
            title: ''
        })
    }
    /**
     * @desc 设置新闻内容表单默认值
     * */
    setNewsContent = (data) => {
        this.formRef.current.setFieldsValue({ advertisingSpaceContent: data })
    }
    pageChange = (pageNo, pageSize) => {
        this.setState({
            pageData: {
                pageNo,
                pageSize
            }
        }, () => {
            this.getData()
        })
    };
    render() {
        const { loading, dataSource, columns, pageData, initialValues, total, dialogStatus, title, btnLoading } = this.state
        return <div className={"p-layout-box configuration"}>

            <div className={"p-layout-content"}>
                <div style={{ float: "right", marginBottom: '10px' }}
                >
                    <TheButton
                        type="default"
                        size="middle"
                        haspermi={['privacySetting:aboutUs:add']}
                        onClick={this.add}
                    >
                        新增
                    </TheButton>
                </div>

                <TheTable loading={loading} dataSource={dataSource} columns={columns} />
                <ThePagination
                    pageNo={pageData.pageNo}
                    pageSize={pageData.pageSize}
                    total={total}
                    pageChange={this.pageChange}
                />
            </div>
            <TheDialog
                visible={dialogStatus}
                title={title}
                width={800}
                handleCancel={this.dialogCancel}
                footer={null}
            >
                <Editor btnLoading={btnLoading} data={initialValues} onFinish={this.onFinish}
                    dialogCancel={this.dialogCancel} />
            </TheDialog>
        </div>;
    }
}

export default AboutUs